<template>
  <div class="Scendkill">
    <div class="Scendkill_top">
      <div class="Top_l">
        <div class="img">
          <img
            src="https://java.crmeb.net/static/images/seckillTitle.png"
            alt=""
          />
        </div>
        <div class="line">|</div>
        <div class="time">{{ time }} 场</div>
        <div class="runtime">
          <Counttime :timeSwap="timeSwap"></Counttime>
        </div>
      </div>
      <div class="button">
        <span>GO</span>
        <van-icon name="arrow" />
      </div>
    </div>
    <div class="Scendkill_bot">
      <Goods-view :goodsList="goodsList"></Goods-view>
    </div>
  </div>
</template>

<script>
const Counttime = () =>
  import(
    /* webpackChunkName: "Counttime" */ "@/components/Littlecom/Counttime.vue"
  );
const GoodsView = () =>
  import(
    /* webpackChunkName: "GoodsView" */ "@/components/Littlecom/GoodsView.vue"
  );
export default {
  name: "FxhDemoScendkill",
  props: ["Scendkills"],
  components: {
    Counttime,
    GoodsView,
  },
  data() {
    return {
      time: "",
      timeSwap: undefined,
      goodsList: [],
    };
  },
  created() {
    this.time = this.Scendkills.secKillResponse.time.slice(0, 5);
    console.log(this.time);
    this.timeSwap = this.Scendkills.secKillResponse.timeSwap;
    this.goodsList = this.Scendkills.productList;
  },
  mounted() {},

  methods: {},
};
</script>

<style lang="scss" scoped>
.Scendkill {
  box-sizing: border-box;
  padding-left: 10px;
  padding-top: 10px;
  margin: 15px auto;
  border-radius: 8px;
  width: 347px;
  height: 209px;
  background: -webkit-linear-gradient(
    270deg,
    #ff448f,
    hsla(0, 0%, 100%, 0.2) 72%,
    #fff
  );
  .Scendkill_top {
    @include between;
    width: 325px;
    height: 19px;
    .Top_l {
      @include around;
      .img {
        width: 73px;
        height: 19px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .line {
        height: 11px;
        height: 1px;
        margin-left: 10px;
        color: #fff;
      }
      .time {
        font-size: 14px;
        color: #fff;
        margin-left: 10px;
        margin-right: 1px;
        font-weight: 800;
      }
      .runtime {
        margin-left: 10px;
        border-radius: 3px;
      }
    }
    .button {
      color: #fe960f;
      font-weight: 800;
      width: 42px;
      height: 19px;
      font-size: 10px;
      background: linear-gradient(142deg, #ffe9ce, #ffd6a7);
      opacity: 1;
      border-radius: 18px;
      text-align: center;
      line-height: 19px;
    }
  }
  .Scendkill_bot {
    margin-top: 15px;
    width: 332px;
    height: 164px;
  }
}
</style>
